<template>
  <mars-dialog v-bind="attrs" title="路线导航" :width="330" :top="60" :right="10" icon="clue">
    <div>
      <div class="f-mb">
        <a-space>
          <span class="mars-pannel-item-label">起点：</span>
          <mars-input v-model:value="startPoint" @change="startPointChange" />
          <mars-button class="small-btn" @click="drawStartPoint">图上选点</mars-button>
        </a-space>
      </div>

      <div class="f-mb">
        <a-space>
          <span class="mars-pannel-item-label">终点：</span>
          <mars-input v-model:value="endPoint" @change="endPointChange" />
          <mars-button class="small-btn" @click="drawEndPoint">图上选点</mars-button>
        </a-space>
      </div>

      <div class="f-mb">
        <a-space>
          <span class="mars-pannel-item-label">途径点：</span>
          <mars-input-number class="num-input" readonly v-model:value="passNum" :allowClear="true" addon-after="个" />
          <mars-button class="small-btn" @click="drawPassbyPoint">图上选点</mars-button>
        </a-space>
      </div>

      <div>
        <a-space>
          <span class="mars-pannel-item-label">避让区：</span>
          <mars-input-number class="num-input" readonly v-model:value="areaNum" :allowClear="true" addon-after="个" />
          <mars-button class="small-btn" @click="drawPassArea">绘制区域</mars-button>
        </a-space>
      </div>
    </div>
  </mars-dialog>

  <mars-dialog :visible="pathRoadArr.length > 0" :width="330" :top="324" :right="10">
    <div class="speed f-tac">
      <a-space>
        <span class="mars-pannel-item-label">速度：</span>
        <mars-input-number v-model:value="speedVal" @change="resetSpeed" addon-after="km/h" />
      </a-space>

      <div class="path-pannel" v-for="(pathRoad, i) in pathRoadArr" :key="i">
        <div class="plan-header">
          <span class="plan-Number">方案 {{ i + 1 }}</span>
          <div class="tools">
            <span class="tools-btn" @click="startNavigation(pathRoad.id)"> {{ pathRoad.id === currentId ? "停止导航" :
    "开始导航"
              }} </span>
            <span class="tools-btn" @click="showLine(pathRoad.id)">查看路线</span>
          </div>
        </div>

        <div class="plan-body">
          <div class="distance">
            <span>全长：</span>
            <span>{{ pathRoad.distance }}</span>

            <a-checkbox class="view-follow" v-show="currentId === pathRoad.id" v-model:checked="isFollow"
              @change="viewFollow(pathRoad.id)">跟随视角</a-checkbox>
          </div>

          <div class="content">
            <span>途经：</span>
            <span>{{ pathRoad.content }}</span>
          </div>
        </div>

      </div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, useAttrs, onUnmounted } from "vue"
import { $message } from "@mars/components/mars-ui"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { useWidget } from "@mars/common/store/widget"
import * as mapWork from "./map"

// 启用map.ts生命周期
useLifecycle(mapWork)
const attrs = useAttrs()

const { updateWidget } = useWidget()

// 取消工具栏高亮
onUnmounted(() => {
  updateWidget("toolbar", "query-route")
})

const startPoint = ref("") // 起点坐标
const endPoint = ref("") // 终点坐标
const speedVal = ref(120) // 速度
const isFollow = ref(false) // 视角是否跟随

interface PathRoad {
  id: string
  distance: string
  content: string
}

const pathRoadArr = ref<PathRoad[]>([]) // 所有路线数组

// 监听到途经点 回传途经点个数到input框
mapWork.eventTarget.on("passPoint", (item: any) => {
  passNum.value = item.passPointNumber
})

// 监听到避让区域 回传途经点个数到input框
mapWork.eventTarget.on("passAreaArr", (item: any) => {
  areaNum.value = item.num
})

// 监听到路径信息
mapWork.eventTarget.on("pathMsg", (item: any) => {
  pathRoadArr.value = []
  if (!item?.roadpath) {
    $message("当前无推荐方案")
    return
  }
  const pathArr = item.roadpath
  pathArr.forEach((element: any) => {
    const road = element.pathMsg.road
    const id = element.id
    const distance = (element.pathMsg.allDistance / 1000).toFixed(3) + "公里"
    const content = road.reduce((prev: string[], item: string) => `${prev && item ? prev + "、" : prev}${item || ""}`, "")
    pathRoadArr.value.push({ id, distance, content })
  })
})

// 监听到右键清除规划路线
mapWork.eventTarget.on("clearRouter", (item: any) => {
  passNum.value = 0
  areaNum.value = 0
  startPoint.value = ""
  endPoint.value = ""
  speedVal.value = 120
  isFollow.value = false
  pathRoadArr.value = []

})
// 绘制起点
const drawStartPoint = async () => {
  clearTableData()
  const position = await mapWork.drawStartPoint()
  startPoint.value = position.lng + "," + position.lat + "," + position.alt
}

// 起点删除
const startPointChange = () => {
  clearTableData()
  if (startPoint.value === "") {
    mapWork.clearStartPoint()
  }
}

// 绘制终点
const drawEndPoint = async () => {
  clearTableData()

  const endPosition = await mapWork.drawEndPoint()
  endPoint.value = endPosition.lng + "," + endPosition.lat + "," + endPosition.alt
}

// 终点删除
const endPointChange = () => {
  clearTableData()
  mapWork.clearEndPoint()
}

// 途经点
const passNum = ref(0)
const drawPassbyPoint = () => {
  clearTableData()
  mapWork.drawPassbyPoint()
}

// 避让区
const areaNum = ref(0)
const drawPassArea = () => {
  clearTableData()
  mapWork.drawPassArea()
}

// 清空表格数据
const clearTableData = () => {
  if (pathRoadArr.value.length > 0) {
    pathRoadArr.value = []
  }
}

// 开始导航
const currentId = ref("")
const startNavigation = (id: string) => {
  const cId = currentId.value
  if (cId) {
    mapWork.reset()
    currentId.value = ""
  }
  if (id && cId !== id) {
    mapWork.startNavigation(id)
    mapWork.resetSpeed(speedVal.value)
    isFollow.value = false
    currentId.value = id
  }
}

// 查看路线
const showLine = (id: string) => {
  if (currentId.value) {
    mapWork.reset()
    currentId.value = ""
  }
  mapWork.openHighlightForLine(id)
}

// 视角跟随
const viewFollow = (id: string) => {
  if (isFollow.value) {
    mapWork.startGS(id)
  } else {
    mapWork.removeTrack()
  }
}

// 速度发生改变
const resetSpeed = () => {
  mapWork.resetSpeed(speedVal.value)
}
</script>
<style lang="less" scoped>
.mars-pannel-item-label {
  width: 40px;
}

.num-input {
  width: 148px !important;
}

.speed {
  max-height: 510px;
  overflow-y: scroll;
}

.path-pannel {
  margin-top: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);

  .plan-header {
    display: flex;
    justify-content: space-between;

    .plan-Number {
      width: 61px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 2px 0px 2px 0px;
      background: rgba(51, 133, 255, 0.7);
    }

    .tools {
      .tools-btn {
        display: inline-block;
        text-align: center;
        width: 74px;
        height: 26px;
        line-height: 26px;
        border-radius: 0px 0px 2px 2px;
        background: #3385FF;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }

  .plan-body {
    color: #EAF2FF;

    .distance {
      width: 100%;
      padding: 10px 10px 5px 10px;
      text-align: start;

      .view-follow {
        float: right;
      }
    }

    .content {
      width: 100%;
      line-height: 25px;
      text-align: start;
      padding-left: 10px;
      padding-bottom: 10px;

    }
  }



}
</style>
